<template>
  <div>
    <!-- 退货详情 -->

    <!-- 退货概况 -->
    <div class="Order_Details">
      <h3>订单概况</h3>

      <div class="Order_Details_Table">
        <el-row class="Order_Details_Table_Top">
          <el-col :span="12"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              退货原因：
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              商品返回方式：
            </div></el-col
          >
        </el-row>

        <el-row class="Order_Details_Table_Top">
          <el-col :span="12"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              退货金额：
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              实退金额：
            </div></el-col
          >
        </el-row>

        <el-row class="Order_Details_Table_Top">
          <el-col :span="24"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              问题说明：
            </div></el-col
          >
        </el-row>

        <el-row class="Order_Details_Table_Bottom">
          <el-col :span="24"
            ><div class="grid-content bg-purple" style="margin-left:5px">
              申请凭据：
            </div></el-col
          >
        </el-row>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="Order_Details">
      <h3>商品列表</h3>
      <el-table :data="Order_Details_Table" style="width: 100%" border>
        <el-table-column
          prop="date"
          label="商品图片"
          width="100"
          align="center"
        >
          <el-image
            style="width: 50px; height: 50px"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            fit="fit"
          ></el-image>
        </el-table-column>
        <el-table-column prop="name" label="商品名称"> </el-table-column>
        <el-table-column prop="address" label="商品货号"> </el-table-column>
        <el-table-column prop="address" label="销售单价"> </el-table-column>
        <el-table-column prop="address" label="数量"> </el-table-column>
        <el-table-column prop="address" label="实付金额"> </el-table-column>
      </el-table>
    </div>

    <!-- 订单操作日记 -->
    <div class="Order_Details">
      <h3>订单操作日记</h3>
      <el-table :data="Order_Details_Table_Diary" style="width: 100%" border>
        <el-table-column prop="address" label="操作内容"> </el-table-column>
        <el-table-column prop="address" label="操作时间"> </el-table-column>
      </el-table>
    </div>

    <!-- 操作（重要） -->
    <div class="Order_Details">
      <h3>操作（重要）</h3>

      <div class="Order_Details_Table">
        <el-row class="Order_Details_Table_Top" style="padding: 20px 0">
          <el-form ref="form" :model="Operation_form" label-width="120px">
            <el-form-item label="审核">
              <el-select
                v-model="Operation_form.audit"
                placeholder="请选择活动区域"
              >
                <el-option label="同意退货" value="tongyi"></el-option>
                <el-option label="拒绝退货" value="jujue"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="给客户留言">
              <el-input
                type="textarea"
                v-model="Operation_form.message"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </div>

    <!-- 尾部按钮 -->
    <el-row :gutter="20" style="margin:20px 0">
      <el-col :span="12" :offset="6"
        ><div class="grid-content bg-purple" style=" text-align: center;">
          <el-button
            style="min-width:150px"
            size="medium"
            type="info"
            icon="el-icon-arrow-left"
            @click="Order_Details_back"
            >返回退单列表</el-button
          >
          <el-button v-if="Salesreturn" type="primary" 
            >保存</el-button
          >
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      // 付款进度
      Schedule: 1,

      //   商品列表表单数据
      Order_Details_Table: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
      //   订单操作日记表单数据
      Order_Details_Table_Diary: [],
      //   操作审核
      Operation_form: {
        audit: "",
        message: "",
      },
      //   是否显示保存按钮
      Salesreturn: true,
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    //   返回订单列表按钮
    Order_Details_back() {
      this.$router.push("/RetiredList");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.Order_Details {
  h3 {
    height: 50px;
    line-height: 50px;
  }
  .Order_Details_Table {
    border: 1px solid #ebeef5;
    .Order_Details_Table_Top {
      border-bottom: 1px solid #ebeef5;
      min-height: 40px;
      line-height: 40px;
    }
    .Order_Details_Table_Bottom {
      min-height: 40px;
      line-height: 40px;
    }
  }
}
</style>
